<template>
  <el-row style="padding: 15px;">
    <!--工具条-->
		<el-col :span="24" style="padding-bottom: 0px;">
      <el-button type="primary" @click="addDialog">新增</el-button>
		</el-col>
    <el-col :span="24" style="margin-top: 15px;">
      <el-table :data="list" v-loading="listLoading" border style="width: 100%">
        <el-table-column type="expand" width="5">
          <template scope="props">
            <v-setting></v-setting>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="平台名称" width="20%" align="center"></el-table-column>
        <el-table-column label="logo" width="20%" align="center">
          <template scope="scope">
            <v-circular-image :src="scope.row.logo" />
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="说明" width="40%" align="center"></el-table-column>
        <el-table-column label="操作" width="20%" align="center">
          <template scope="scope">
            <el-button size="small" type="info">设置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>

    <!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="平台名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

  </el-row>
</template>

<script>
import circular from '../../components/circular-image'
import setting from './platform-setting'
export default {

  data() {
    return {
      list: [],
      listLoading: false,

      addLoading: false,
      addFormVisible: false, // 新增界面是否显示
      addFormRules: {
        name: [
          { required: true, message: '请输平台名称', trigger: 'blur' }
        ]
      },
      addForm: {
        name: ''
      }
    }
  },
  created() {
    this.getPlatform()
  },
  methods: {
    addDialog() {
      this.addFormVisible = true
      this.addForm = {name: ''}
    },
    addSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true
            let para = Object.assign({}, this.addForm)
            this.addPlatform(para).then((result) => {
              this.addFormVisible = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.getPlatform()
            }).catch((result) => {
              console.log('发生错误')
            })
          })
        }
      })
    },
    addPlatform(arg) {
      return new Promise((resolve, reject) => {
        this.$http.post('/api/system/platform/add', arg).then(response => {
        // 不管是否成功都要观点loading状态
          this.addLoading = false
          resolve()
        })
      })
    },
    getPlatform() {
      new Promise((resolve, reject) => {
        this.listLoading = true
        this.$http.post('/api/system/platform/list').then(response => {
          console.log(response.body.data)
          this.listLoading = false
          resolve(response.body.data)
        })
      }).then((result) => {
        this.list = result
      }).catch((result) => {

      })
    }
  },
  components: {
    'v-circular-image': circular,
    'v-setting': setting
  }
}
</script>
<style lang='less'>
  .el-table{
    table{
      width: 100% !important;
    }
  }
</style>
